<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/lib/layui-v2.5.5/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label required">手机号</label>
        <div class="layui-input-block">
            <input type="text" name="mobilePhone" lay-verify="required" maxlength="11" lay-reqtext="不能为空" placeholder="请输入手机号" value="" class="layui-input">
            <tip>填写手机号。</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username"  maxlength="15"  placeholder="请输入用户名" value="" class="layui-input">
            <tip>填写用户名。</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="email"  maxlength="40" placeholder="请输入邮箱" value="" class="layui-input">
            <tip>填写邮箱。</tip>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">密码</label>
        <div class="layui-input-block">
            <input type="password" name="password" lay-verify="required" maxlength="15" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">确认密码</label>
        <div class="layui-input-block">
            <input type="password" name="confirmPassword" lay-verify="required" maxlength="15" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">昵称</label>
        <div class="layui-input-block">
            <input type="text" name="nickName"  maxlength="15"  lay-verify="required" placeholder="请输入昵称" value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label ">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="trueName"  maxlength="10"   placeholder="请输入姓名" value="" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label ">证件号码</label>
        <div class="layui-input-block">
            <input type="text" name="idCard"  maxlength="30" placeholder="请输入证件号码" value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadHeadSculpture">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
        <input type="hidden" id="headSculpture" name="headSculpture" >
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">头像预览</label>
        <div class="layui-input-block">
            <img id="previewHeadSculpture" th:width="240" th:height="220">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">证件照正面</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadIdcardImg1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
        <input type="hidden" id="idcardImg1" name="idcardImg1"  >
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">证件照正面预览</label>
        <div class="layui-input-block">
            <img  id="previewIdcardImg1" th:width="240" th:height="220">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">证件照背面</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="uploadIdcardImg2">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
        <input type="hidden" id="idcardImg2" name="idcardImg2"  >
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">证件照正面预览</label>
        <div class="layui-input-block">
            <img  id="previewIdcardImg2" th:width="240" th:height="220">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">证件类型</label>
        <div class="layui-input-block"  >
            <select name="idcardType" lay-search="">
                <option value="" selected>请选择</option>
                <option value="1" >身份证</option>
                <option value="2">护照</option>
                <option value="3">海外</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">实名状态</label>
        <div class="layui-input-block" >
            <input type="radio" name="trueNameStatus" value="0" title="未实名" checked="">
            <input type="radio" name="trueNameStatus" value="1" title="已实名" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" name="sex" value="1" title="男" checked="">
            <input type="radio" name="sex" value="0" title="女">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label ">个性签名</label>
        <div class="layui-input-block">
            <input type="text" name="personalizedSignature"  maxlength="50" placeholder="请输入个性签名" value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script th:src="@{/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
<script>
    layui.use(['form','upload'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#uploadHeadSculpture' //绑定元素
            ,url: '/user/upload/head/sculpture' //上传接口
            ,data:{userMainId:-1}
            ,done: function(res){
                if(res.code==1)
                {
                    layer.msg(res.msg);
                }
                $("#previewHeadSculpture").attr("src",res.data.httpHeadSculpture);
                $("#headSculpture").val(res.data.headSculpture);
            }
            ,error: function(){
                layer.msg("上传头像异常");
            }
        });


        //执行实例
        var uploadIdcardImg1 = upload.render({
            elem: '#uploadIdcardImg1' //绑定元素
            ,url: '/user/upload/idcardImg1' //上传接口
            ,data:{userMainId:-1}
            ,done: function(res){
                if(res.code==1)
                {
                    layer.msg(res.msg);
                }
                $("#previewIdcardImg1").attr("src",res.data.httpIdcardImg1);
                $("#idcardImg1").val(res.data.idcardImg1);
            }
            ,error: function(){
                layer.msg("上传异常");
            }
        });


        //执行实例
        var uploadIdcardImg2 = upload.render({
            elem: '#uploadIdcardImg2' //绑定元素
            ,url: '/user/upload/idcardImg2' //上传接口
            ,data:{userMainId:-1}
            ,done: function(res){
                if(res.code==1)
                {
                    layer.msg(res.msg);
                }
                $("#previewIdcardImg2").attr("src",res.data.httpIdcardImg2);
                $("#idcardImg2").val(res.data.idcardImg2);
            }
            ,error: function(){
                layer.msg("上传异常");
            }
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {

            if(data.field.password!=data.field.confirmPassword)
            {
                layer.msg("密码与确认密码不一致");
                return false;
            }


            if(data.field.mobilePhone!=null)
            {
                var reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
                if(!reg.test(data.field.mobilePhone))
                {
                    layer.msg("手机号格式错误");
                    return false;
                }
            }

            if(data.field.email!=null)
            {
                var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
                if(!reg.test(data.field.email))
                {
                    layer.msg("邮箱格式错误");
                    return false;
                }
            }

            if(data.field.username!=null)
            {
                var reg = /^[a-zA-Z][a-zA-Z0-9]{4,16}$/;
                if(!reg.test(data.field.username))
                {
                    layer.msg("用户名格式错误");
                    return false;
                }
            }


            $.ajax({
                url:"[[@{/user/regist}]]",
                contentType: "application/json; charset=utf-8",
                type:'POST',
                data:JSON.stringify(data.field),
                success:function(data){
                    if(data.code<=0) {
                        layer.msg(data.msg);
                        return false;
                    }
                    var index = layer.alert(data.msg, {
                        title: '提示信息'
                    }, function () {
                        // 关闭弹出层
                        layer.close(index);
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.location.reload();
                        parent.layer.close(iframeIndex);

                    });
                }
            });
            return false;
        });

    });
</script>
</body>
</html>